<script setup lang="ts">
import { tabbarStore } from "./tabbar";
// 'i-carbon-code',
import { tabbarList as _tabBarList, cacheTabbarEnable, selectedTabbarStrategy, TABBAR_MAP } from "./tabbarList";

const customTabbarEnable = selectedTabbarStrategy === TABBAR_MAP.CUSTOM_TABBAR_WITH_CACHE || selectedTabbarStrategy === TABBAR_MAP.CUSTOM_TABBAR_WITHOUT_CACHE;

/** tabbarList 里面的 path 从 pages.config.ts 得到 */
const tabbarList = _tabBarList.map((item) => ({ ...item, path: `/${item.pagePath}` }));
function selectTabBar({ value: index }: { value: number }) {
	const url = tabbarList[index].path;
	tabbarStore.setCurIdx(index);
	if (cacheTabbarEnable) {
		uni.switchTab({ url });
	} else {
		uni.navigateTo({ url });
	}
}
onLoad(() => {
	// 解决原生 tabBar 未隐藏导致有2个 tabBar 的问题
	const hideRedundantTabbarEnable = selectedTabbarStrategy === TABBAR_MAP.CUSTOM_TABBAR_WITH_CACHE;
	hideRedundantTabbarEnable &&
		uni.hideTabBar({
			fail(err) {
				console.log("hideTabBar fail: ", err);
			},
			success(res) {
				console.log("hideTabBar success: ", res);
			}
		});
});
</script>

<template>
	<u-tabbar v-if="customTabbarEnable" :value="tabbarStore.curIdx" @change="selectTabBar" :fixed="false" :placeholder="false" safeAreaInsetBottom style="background-color: red">
		<block v-for="item in tabbarList" :key="item.path">
			<u-tabbar-item :text="item.text + '1'">
				<template #active-icon>
					<image class="u-page__item__slot-icon" :src="item.selectedIconPath"></image>
				</template>
				<template #inactive-icon>
					<image class="u-page__item__slot-icon" :src="item.iconPath"></image>
				</template>
			</u-tabbar-item>
		</block>
	</u-tabbar>
</template>
